import { Button, Modal, message, Spin, Select, Table } from 'antd';

const confirm = Modal.confirm;
const Option = Select.Option;
import { WeaErrorPage, WeaTools, WeaAlertPage, WeaTab } from 'ecCom';
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
class CustomerEvaluation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {
    	const { contentStore, location: { query } } = this.props;
    contentStore.getEvaluationStandard();
    contentStore.getEvaluationInfo(query);
    contentStore.getEvalRightMenu({ selectType: 'evaluationinfo', ...query });
  }
  componentWillUnmount() {
    const { contentStore } = this.props;
    contentStore.clearStatus();
  }
  render() {
    const { contentStore } = this.props;
    const { evalAuth: { verified, hasRight }, customerId, evalStandard, evalDataSources } = contentStore;
    if (verified && !hasRight) {
      return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@0qiq5o`} >
        <div style={{ color: '#000' }}>
          {getLabel(2012, '对不起，您暂时没有权限！')}
        </div>
      </WeaAlertPage>
      );
    }
    if (verified && hasRight) {
      const columns = [{
        title: getLabel(195, '名称'),
        dataIndex: 'name',
        width: '30%',
      }, {
        title: getLabel(6072, '打分'),
        dataIndex: 'levelId',
        render: (text, record, index) => (<div>
          {toJS(evalStandard).length > 0 &&
          <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@zyowfk@sle`} defaultValue={text || toJS(evalStandard)[0].levelId} style={{ width: '80% ' }} onChange={value => this.selectChange(value, index)}>
            {this.getEvaluationOption()}
          </Select>
          }
        </div>),
        width: '20%',
      }, {
        title: getLabel(18093, '分值'),
        dataIndex: 'levelValue',
        render: (text, record, index) => <div>{text}</div>,
        width: '20%',
      }, {
        title: getLabel(6071, '权重'),
        dataIndex: 'proportion',
        render: (text, record, index) => <div>{text}%</div>,
        width: '15%',
      }, {
        title: getLabel(17506, '得分'),
        dataIndex: 'score',
        render: (text, record, index) => <div>{Number(record.proportion) * Number(record.levelValue || 1) / 100}</div>,
        width: '15%',
      }];
      return (
        <div style={{ height: '100%' }}>
          <div className="wea-crm-table-eval" >
            <Table
              ecId={`${this && this.props && this.props.ecId || ''}_Table@r3d4r9`}
              columns={columns}
              dataSource={toJS(evalDataSources)}
              pagination={false}
              className="crm-customer-table"
              footer={this.setFooter()}
            />
          </div>
        </div>
      );
    }
    return <div />;
  }

    selectChange=(value, index) => {
      const { evalStandard, evalDataSources, saveCustomerEvalData } = this.props.contentStore;
      const _dataSource = [].concat(toJS(evalDataSources));
      const evalStandardArr = toJS(evalStandard);
      _dataSource[index].levelId = value;
      for (let i = 0; i < evalStandardArr.length; i++) {
        if (evalStandardArr[i].levelId == value) {
          _dataSource[index].levelValue = evalStandardArr[i].levelValue;
        }
      }

      const levelArr = [];
      const proportionArr = [];
      const evaluationIDArr = [];
      for (let j = 0; j < _dataSource.length; j++) {
        levelArr.push(_dataSource[j].levelId || evalStandardArr[0].levelId);
        proportionArr.push(_dataSource[j].proportion);
        evaluationIDArr.push(_dataSource[j].id);
      }
      const params = {
        level: `${levelArr}`,
        proportion: `${proportionArr}`,
        evaluationID: `${evaluationIDArr}`,
      };
      saveCustomerEvalData(_dataSource, params);
    }
    getEvaluationOption() {
      const { evalStandard } = this.props.contentStore;
      const children = [];
      toJS(evalStandard).map((item,index) => {
        children.push(<Option ecId={`${this && this.props && this.props.ecId || ''}_Option@4lazya@${index}`} value={item.levelId} key={item.levelId}>{item.levelName}</Option>);
      });
      return children;
    }
    setFooter() {
      const { evalDataSources } = this.props.contentStore;
      const _evalDataSources = toJS(evalDataSources);
      let sum = 0;
      for (let i = 0; i < _evalDataSources.length; i++) {
        sum += Number(_evalDataSources[i].proportion) * Number(_evalDataSources[i].levelValue || 1) / 100;
      }
      return (<table><tbody ><tr>
        <td width="30%" style={{ padding: '0 8px' }} /><td width="20%" style={{ padding: '0 8px' }} /><td width="20%" style={{ padding: '0 8px' }} />
        <td width="15%" style={{ padding: '0 8px' }}>{getLabel(84356, '总评分')}: </td>
        <td width="15%" style={{ padding: '0 8px' }}>{sum.toFixed(1)}</td>
      </tr></tbody></table>);
    }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@4h8dtv`} msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />,
  { error: '' },
)(CustomerEvaluation);
